<template>
    <div id="skybox" class="skybox">
        <div class="txt">Oops!
            <br><span>404 FILE NOT FOUND</span>
            <p @click="goHome">Redirect to Home in {{ countDown }}</p>
        </div>
        <div id="player" class="idle"></div>
        <div class="ground"></div>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            countDown: 5,
        }
    },
    mounted() {
        var player = document.getElementById('player');

        // adjust skybox height to multiple of 32
        document.addEventListener("DOMContentLoaded", function () {
            var h = document.getElementById('skybox').offsetHeight;
            var s_h = Math.round(h / 32) * 32;
            document.getElementById('skybox').style.height = `${s_h}px`;
        });

        function walkLeft() {
            player.className = "walk-left";
            setTimeout(searchLeft, 1000);
        }
        function searchLeft() {
            player.className = "search-left";
            // player.style.left = "40%";
            setTimeout(walkRight, 3000);
        }
        function walkRight() {
            player.className = "walk-right";
            setTimeout(searchRight, 1000);
        }
        function searchRight() {
            player.className = "search-right";
            // player.style.left = "60%";
            setTimeout(walkLeft, 3000);
        }

        walkLeft();
    },
    methods: {
        goHome() {
            this.$router.push('/')
        }
    },
    created() {
        setInterval(() => {
            this.countDown > 0 ? this.countDown-- : this.$router.push('/')
        }, 1000)
    }
}
</script>

<style lang='scss' scoped>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

$leftPos: 15%;
$rightPos: 85%;
$walkSpeed: 0.2s;

@keyframes blinker {
    75% {
        opacity: 0;
    }
}

@keyframes walk-left-loop {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -2 * 32px;
    }
}

@keyframes walk-right-loop {
    0% {
        background-position: -4 * 32px;
    }

    100% {
        background-position: -6 * 32px;
    }
}

@keyframes search {
    0% {
        background-position: -2 * 32px;
    }

    100% {
        background-position: -4 * 32px;
    }
}

@keyframes walk-left {
    0% {
        left: $rightPos;
    }

    100% {
        left: $leftPos;
    }
}

@keyframes walk-right {
    0% {
        left: $leftPos;
    }

    100% {
        left: $rightPos;
    }
}

.walk-left {
    animation: walk-left-loop $walkSpeed steps(2) infinite, walk-left 1s linear;
}

.walk-right {
    animation: walk-right-loop $walkSpeed steps(2) infinite, walk-right 1s linear;
}

.idle {
    animation: none;
    background-position: -6 * 32px;
}

.search-left {
    animation: search 2s steps(2) infinite;
    left: $leftPos !important;
}

.search-right {
    animation: search 2s steps(2) infinite;
    left: $rightPos !important;
}

body {
    font-family: 'Press Start 2P', sans-serif;
    text-rendering: optimizeSpeed;
    color: #fff;
    background-image: url('');
}

.skybox {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #63B4F5;

    .txt {
        position: absolute;
        width: 90%;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-transform: uppercase;
        font-size: 5.4em;
        line-height: 1.1em;

        span {
            display: block;
            margin-top: 1vh;
            animation: blinker 2s steps(1) infinite;
            font-size: 0.5em;
            line-height: 1.2em;
        }

        p {
            display: block;
            margin-top: 1vh;
            font-size: 0.5em;
            line-height: 1.2em;
        }
    }

    #player {
        position: absolute;
        width: 32px;
        height: 48px;
        left: 50%;
        bottom: 32px;
        animation-fill-mode: forwards;
        background-image: url('');
    }

    .ground {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 32px;
        background-image: url('');
    }
}
</style>